<template>
  <div class="app-container">
    <ul>
      <li v-for="item in allMenuList" :key="item.menu_id">
        <el-checkbox v-model="item.checked">{{ item.menu_name }}</el-checkbox>
      </li>
    </ul>
  </div>
</template>

<script>
import { getAllMenuList, getRoleMenuList } from '@/api/user'

export default {
  data() {
    return {
      roleId: 1,
      userInfo: null,

      props: {
        value: 'label',
        children: 'cities'
      },
      allMenuList: []
    }
  },
  created() {
    this.roleId = this.$route.params.id.toString()
    this.userInfo = this.$store.getters.userInfo
    this.getList()
  },
  methods: {
    getList(data) {
      getAllMenuList().then(allMenu => {
        getRoleMenuList(this.roleId).then(roleMenu => {
          this.allMenuList = this.formateMenuList(allMenu.data, roleMenu.data)
        })
        // this.allMenuList = res.data
      }).catch(() => {})
    },
    formateMenuList(all, role) {
      const result = all
      result.map(item => {
        if (role.some(h => {
          return item.menu_id === h.menu_id
        })) {
          item.checked = true
        }
      })
      return result
    }
  }
}
</script>
